<template>
  <div style="height: 100%" ref="dom"></div>
</template>

<script>
import * as echarts from 'echarts'
import { numAdd } from '@/utils/calulate'

export default {
  data() {
    return {
      myChart: null,
    }
  },

  components: {},
  props: {
    rateShot: {
      type: Object,
      default: ()=>{
        return { }
      }
    },
    name: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: null,
    },
    radius: {
      type: Array,
      default:()=>{return [80, 120]} ,
    },
  },
  mounted() {
    this.createChart()
  },
  computed: {
    c_color:function(){
      let value = 0
      if(this.rateShot.total !== 0){
        value =  parseInt((this.rateShot.finish || 0) *100  / (this.rateShot.total || 1) )
      }
      return value < 60 ? '#f5222d':value < 80 ? '#1890ff':'#52c41a'
    }
  },
  watch: {
    rateShot: function (n) {
      this.createChart()
    },
  },
  methods: {
    getOption(rateShot) {
      let value = 0
      if(this.rateShot.total !== 0){
        value =  parseInt((this.rateShot.finish || 0) *100  / (this.rateShot.total || 1) )
      }
      const gaugeData = [
        {
          value,
          color:this.c_color,
          // name: `总任务: ${this.all}\n 完成任务: ${this.readyNum}`,
          name: `总任务: ${this.rateShot.total}\n \n完成任务: ${this.rateShot.finish}`,
          title: {
            offsetCenter: ['0%', '-30%'],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '35%'],
          },
        },
      ]
      let option = {
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: this.c_color,
                borderWidth: 1,
                // borderColor: '#464646',
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: gaugeData,
            title: {
              fontSize: 14,
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 14,
              color: this.c_color,
              borderColor: this.c_color,
              borderRadius: 20,
              borderWidth: 1,
              formatter: '{value}%',
            },
          },
        ],
      }
      return option
    },
    createChart() {
      let option = this.getOption(this.rateShot)
      if (!this.myChart) this.myChart = echarts.init(this.$refs.dom)
      window.onresize = this.myChart.resize
      this.myChart.setOption(option)
    },
  },
  destroyed() {},
}
</script>
<style lang='scss' scoped>
</style>